import { h, defineComponent, withDirectives, resolveDirective } from 'vue'

/** 封装@vueuse/motion动画库中的自定义指令v-motion */
export default defineComponent({
  name: 'Motion',
  props: {
    delay: {
      type: Number,
      default: 50
    },
    direction: {
      type: String,
      default: () => 'left',
      validator: (value: string) => ['left', 'right'].includes(value)
    }
  },
  render() {
    const { delay, direction } = this

    const motion = resolveDirective('motion')

    const initialPosition =
      direction === 'left' ? { opacity: 0, x: -150 } : { opacity: 0, x: 150 }

    const enterPosition = { opacity: 1, x: 0 }

    return withDirectives(
      h(
        'div',
        {},
        {
          default: () => [this.$slots.default()]
        }
      ),
      [
        [
          motion,
          {
            initial: initialPosition,
            enter: {
              ...enterPosition,
              transition: {
                delay
              }
            }
          }
        ]
      ]
    )
  }
})
